<template>
  <div :id="echarts" :style="getheight"></div>
</template>
<script>
export default {
  name: 'pie',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 150
    },
    color: {
      type: Array,
      default: () => [
        'rgba(14,109,236',
        'rgba(255,91,6',
        'rgba(100,255,249',
        'rgba(248,195,248',
        'rgba(110,234,19',
        'rgba(255,168,17',
        'rgba(218,111,227'
      ]
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      option: {
          color:this.color,
                tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        polar: {},
        angleAxis: {
          interval: 1,
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B4A6B',
              width: 5,
              type: 'solid'
            }
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: '#0B4A6B',
            margin: 8,
            fontSize: 16
          }
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B3E5E',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 20, 0],
            color: '#0B3E5E',
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: '#0B3E5E',
              width: 2,
              type: 'solid'
            }
          }
        },
        calculable: true,
        series: [
          {
            type: 'pie',
            radius: ['6%', '10%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 50
              },
              emphasis: {
                show: false
              }
            },
            tooltip: {
              show: false
            },
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: '#0B4A6B'
                  }
                }
              }
            ]
          },
          {
            type: 'pie',
            radius: ['90%', '95%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 50
              },
              emphasis: {
                show: false
              }
            },
            tooltip: {
              show: false
            },
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: '#0B4A6B'
                  }
                }
              }
            ]
          },
          {
            stack: 'a',
            type: 'pie',
            radius: ['20%', '80%'],
            roseType: 'area',
            zlevel: 10,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                textStyle: {
                  fontSize: 12
                },
                position: 'outside'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 15,
                length2: 50,
                lineStyle: {
                  type: 'dotted'
                }
              },
              emphasis: {
                show: true
              }
            },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(document.getElementById(this.echarts))

      this.option.series[2].data = this.chartData
      chartFactor.setOption(this.option)
    }
  }
}
</script>
